<template>
    <div class="pie">
        <div class="left">
            <chart :options="pies" :init-options="initOptions" autoresize></chart>
        </div>
        <div class="right">
            <div class="item item1">
                <span class="name">
                    <i></i>
                    表扬
                </span>
                <span class="text">{{scorePraise}}分（{{scorePraiseRatio}}%）</span>
            </div>
            <div class="item item2">
                <span class="name">
                    <i></i>
                    批评
                </span>
                <span class="text">{{scoreCritique}}分（{{scoreCritiqueRatio}}%）</span>
            </div>
            <div class="item item3">
                <span class="name">
                    <i></i>
                    文字点评
                </span>
                <span class="text">{{reviewTextCount}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import ECharts from '@/components/echarts/ECharts.vue'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/graphic'
export default {
    name:'pie',
    props:[
        'scorePraise',
        'scoreCritique',
        'scorePraiseRatio',
        'scoreCritiqueRatio',
        'reviewTextCount',
        'score'
    ],
    components:{
        chart:ECharts
    },
    data(){
        return {
            initOptions: {
                renderer: 'canvas'
            },
            pie:{
                color:['#128FEF','#FF0000'],
                series: [
                    {
                        type: 'pie',
                        radius: ['45%', '60%'],
                        //roseType: 'radius',
                        clockwise: false,
                        label: {
                            show: false
                        },
                        data: [
                            { value: 65 },
                            { value: 15 }
                        ]
                    }
                ],
                graphic: { // 添加原生图形元素组件
                    elements: [
                        {
                            type: 'text',
                            left: 'center',
                            top: '40%',
                            style: {
                                text: '36',
                                fontSize: 20,
                                textAlign: 'center',
                                width: 30,
                                height: 25,
                                fill: '#000'
                            }
                        },
                        {
                            type: 'text', 
                            left: 'center', 
                            top: '55%',
                            style: {
                                text: '得分', 
                                fontSize: 12, 
                                textAlign: 'center', 
                                width: 30,
                                height: 30,
                                fill: '#999' 
                            }
                        }
                    ]
                }
            }
        }
    },
    computed:{
        pies(){
            var pie = JSON.parse(JSON.stringify(this.pie));
            pie.series[0].data[0].value = this.scorePraise;
            pie.series[0].data[1].value = Math.abs(this.scoreCritique);
            pie.graphic.elements[0].style.text = this.score;
            return pie;
        }
    }
}
</script>

<style lang="less" scoped>
.pie{
    height: 2.48rem;
    overflow: hidden;
    display:flex;
    .left{
        width:2.8rem;
        height: 2.48rem;
        transform:scale(1.2);
        overflow: hidden;
    }
    .right{
        flex: 1;
        margin-top: 0.25rem;
        .item{
            font-size:0.26rem;
            padding:0.15rem 0;
            .name{
                i{
                    display: inline-block;
                    width:0.16rem;
                    height:0.16rem;
                    border-radius:0.16rem;
                    margin-right:0.2rem;
                }
            }
            .text{
                display: inline-block;
                margin-left:0.4rem;
            }
        }
        .item1{
            color:#128FEF;
            .name{
                i{
                    background-color: #128FEF;
                }
            }
        }
        .item2{
            color:#FF0000;
            .name{
                i{
                    background-color:#FF0000;
                }
            }
        }
        .item3{
            color:#666;
            .name{
                i{
                    background-color: #666;
                }
            }
        }
    }
}
</style>
